<template>
  <div class="index">
    <!-- 顶部bar -->
    <top-bar
        v-show="navShow"
        :isleftarrow="isleftarrow"
        :title="title"
        :rightIcon="rightIcon"
        :rightIconUser="rightIconUser"
    >
    </top-bar>
    <!--  若success为flase表示未登录，不显示此部分  仅两个按钮，水平垂直居中 通过路由跳转至登录注册页面 -->
    <div class="log-rig-btn" v-if="success === false">
      <div class="btn-area">
        <van-button type="primary" to="/login">登录</van-button>
      </div>
      <div class="btn-area">
        <van-button type="warning" @click="noRegister()">注册</van-button>
      </div>
    </div>
    <!--  无权限盒子  -->
    <div class="noAuth" v-if="success === true && role === 'ROLE_tour'">
      <van-empty description="无此权限"/>
    </div>
    <!--  功能区盒子  -->
    <div class="space" style="height: 45px"></div>
    <div class="funcArea" v-if="success === true && (role === 'ROLE_user'||role === 'ROLE_admin')">
      <!-- 监控区域采用Grid宫格 -->
      <div class="redFlag">
        <div class="leftDescribe" style="display: flex;height: 20px;width: 100%">
          <b style="">事件监控</b>
          <div style="display:flex; margin-left: 10px;height: 30px;margin-bottom:10px; width: 200px">
            <select  id="monitorTime" v-model="selectTimeVal">
              <option value="recentDay">24小时</option>
              <option value="recentWeek">近一周</option>
              <option value="recentMonth">近一月</option>
              <option value="recentHalfYear">近半年</option>
              <option value="recentAllYear" selected>近一年</option>
            </select>
            <select v-if="this.role === 'ROLE_admin'" id="monitorArea" v-model="selectAreaVal">
              <option value="hysk" selected>红阳三矿</option>
              <option value="mdt">马道头</option>
              <option value="pds">平顶山</option>
              <option value="sys">双鸭山</option>
              <option value="dt">大同</option>
            </select>
          </div>
        </div>
        <!-- 事件报警区域 -->
        <van-grid column-num="4" square>
          <van-grid-item>
            <van-image src="http://www.cdmw-lnu.cn/images/VersionTwoIcon/shield.png"></van-image>
          </van-grid-item>
          <van-grid-item v-for="item in monitorItem" @click="getPopuScienceItem()">
            <div class="gridItem">
              <p class="gridItemNum">{{item.num}}</p>
              <span class="gridItemText">{{item.text}}</span>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 数据报表部分（表格入口） -->
      <div class="redFlag">
        <div class="leftDescribe">
          <b>数据报表</b>
        </div>
        <!-- 表格button区域 -->
        <van-grid column-num="5" :gutter="2" square>
          <van-grid-item v-for="item in tablesItem"
                         :key="item.id" :icon="item.icon"
                         :text="item.text" @click="getItemName(item.itemName,item.text)">
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 数据分析部分（各种图表入口） -->
      <div class="redFlag">
        <div class="leftDescribe">
          <b>图表分析</b>
        </div>
        <!-- 表格button区域 -->
        <van-grid column-num="5" :gutter="2" square>
          <van-grid-item v-for="item in chartsItem" :key="item.id" :icon="item.icon" :text="item.text"
                         @click="getChartsItem(item.itemName,item.text)"></van-grid-item>
        </van-grid>
      </div>
      <!-- 台站工况入口 -->
      <div class="redFlag">
        <div class="leftDescribe">
          <b>工况信息</b>
        </div>
        <!-- 表格button区域 -->
        <van-grid column-num="2" :gutter="2" square>
          <van-grid-item icon="photo-o" text="台站工况"
                         @click="getStationsItem">
          </van-grid-item>
          <van-grid-item icon="photo-o" text="待拓展" @click="Notice"></van-grid-item>
        </van-grid>
      </div>
      <!-- 底部占位框 -->
      <div class="blowSpace"></div>
    </div>
    <footer-bar></footer-bar>
  </div>
</template>

<script>
import FooterBar from "../components/FooterBar.vue";
import TopBar from "../components/TopBar.vue";
import {Dialog, Toast} from "vant";
import Qs from "qs";
import {getAlarmData} from "../request/api/indexLoadData";

export default {
  name: "Index",
  components: {FooterBar, TopBar},
  data() {
    return {
      title: "",
      isleftarrow: "",
      navShow: true,
      rightIcon: "",
      rightIconUser: "",
      success: this.$store.state.userInfo.success,
      role: this.$store.getters.userRoleInfo,
      chartsItem: this.$store.state.chartsItem,
      tablesItem: this.$store.state.tablesItem,
      monitorItem: this.$store.state.monitorItem,
      selectTimeVal:this.$store.state.monitorRequestData.time,
      selectAreaVal:this.$store.state.monitorRequestData.area
    };
  },
  created() {
    this.getIndexData(this.$store.state.monitorRequestData.time,this.$store.getters.monitorAreaSwitchTableName);
  },
  methods: {
    getItemName(itemName, itemText) {
      // 将点击的文字信息存入vuex
      // this.$store.state.jumpPage.title = itemText;
      // this.$store.state.jumpPage.titleRes = itemName;
      this.$store.commit("changeJumpPageInfo",itemName);
      this.$store.commit("changeJumpPageChnInfo",itemText);
      this.$router.push({
        name: 'Tables',
        params: {
          name: itemName,
          text: itemText
        }
      })
    },
    getPopuScienceItem(){
      this.$router.push({
        name:'Monitor'
      })
    },
    getChartsItem(itemName, itemText) {
      this.$store.commit("changeJumpPageInfo",itemName);
      this.$store.commit("changeJumpPageChnInfo",itemText);
      this.$router.push({
        name: 'Charts',
        params: {
          name: itemName,
          text: itemText
        }
      })
    },
    getStationsItem(){
      // this.$store.commit("changeJumpPageInfo","Stations");
      // this.$router.push({
      //   path:'/stations'
      // })
      Toast.fail({
        message:'updating',
        duration:1500
      })
    },
    //警告方法
    Notice(){
      Toast({
        message:'You cannot touch it!',
        duration:1000,
        forbidClick:true
      })
    },
    //暂停注册
    noRegister(){
      Dialog.alert({
        title:'警告',
        message:'由于当前为内测环节，暂停注册。'
      })
    },
    //首页监控模块数值
    getIndexData(time,tableName){
      //获取前端传值参数 tableName recentValue
      const formText={
        db_table:tableName,
        recentValue: time
      }
      const formJSON = Qs.parse(formText);
      getAlarmData(formJSON)
       .then(response =>{
         if (response.data.data[0].seriousAlarm === undefined){
           var list = {seriousAlarm:0,usualAlarm:0,slightAlarm:0};
           Toast.fail({
             message:'未检测到事件发生',
             duration:2000
           })
           this.$store.commit("changeMonitorIndexNum",list);
         }else {
           this.$store.commit("changeMonitorIndexNum",response.data.data[0]);
         }
       });
    }
  },
  mounted() {
    console.log(this.$store.state.userInfo)
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
    this.rightIcon = this.$route.meta.rightIcon;
    this.rightIconUser = this.$route.meta.rightIconUser;
  },
  watch: {
    $route(to, from) {
      this.title = to.meta.title;
      this.isleftarrow = from.meta.isleftarrow;
    },
    selectTimeVal(val){
      this.$store.commit("changeMonitorTime",val);
      this.getIndexData(this.$store.state.monitorRequestData.time,this.$store.getters.monitorAreaSwitchTableName);
    },
    selectAreaVal(val){
      this.$store.commit("changeMonitorArea",val);
      this.getIndexData(this.$store.state.monitorRequestData.time,this.$store.getters.monitorAreaSwitchTableName);
      console.log(this.$store.getters.monitorAreaSwitchTableName)
    }
  },
};
</script>

<style scoped>
.log-rig-btn {
  display: flex;
  /*border: 1px solid black;*/
  width: 100%;
  height: 10%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn-area{
  margin: 0 auto;
}

.index {
  background-color: rgb(252, 249, 249);
}

.redFlag {
  padding: 10px 8px;
}

.leftDescribe {
  display: flex;
  font-size: 15px;
  color: black;
  padding-top: 5px;
  padding-bottom: 2px;
}

.gridItemNum {
  font-size: 15px;
  font-weight: bolder;
  color: red;
}

.gridItemText {
  font-size: 5px;
}

.blowSpace {
  height: 46px;
}
</style>